<template>
	<view>
		<view class="wrap">
			<template v-if="loadFlag">
				<template v-if="canJoinFlag">
					<view class="queHead" @tap="test">
						<view class="smTit ellip">佛挡杀佛离调查问卷</view>
						<view class="queLen">共10题</view>
						<image class="wjImg" :src="getStaticFilePath('wjdcDet.png')"></image>
					</view>
					<view class="padd">
						<!-- :profile="basicInfo.profile" -->
						<wj-profile></wj-profile>
						<!--  @selectSingle="selectSingle" @selectMulti="selectMulti" -->
						<wj-que :queList="queList" @selectSingle="selectSingle" @selectMulti="selectMulti"></wj-que>
					</view>
					<!-- <button class="comBtn" :class="[overDateNum == 0 ? 'schDisBg' : '']" @tap="goTjDcwj" v-if="wjLogId == 0">{{overDateNum == 0 ? '问卷已过期' : '提交'}}</button> -->
					<button class="comBtn">提交问卷</button>
				</template>
				<template v-else-if="canJoinFlag == false">
					<no-data-sq></no-data-sq>
				</template>
			</template>
			<template v-else>
				<view class="wholeWh flexAll">
					<loading :loadType="2"></loading>
				</view>
			</template>
			<uni-popup ref="succPop">
				<view class="succPop">
					<image class="smileImg" :src="getStaticFilePath('smile.png')"></image>
					<view class="tips">感谢您的参与~</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import WjProfile from './components/WjProfile.vue'
	import WjQue from './components/WjQue.vue'
	export default {
		components:{
			WjProfile,
			WjQue
		},
		data(){
			return{
				loadFlag:true,
				canJoinFlag:true,
				queList:[
					{
						type:'单选题',
						title:'满意度',
						myAns:'',
						optIndex:-1,
						optionsInfo:[
							{label:'满意',value:1},
							{label:'不满意',value:2}
						],
					},
					{
						type:'单选题',
						title:'亮度大调查',
						myAns:'',
						optIndex:-1,
						optionsInfo:[
							{label:'满意',value:1},
							{label:'不满意',value:1},
							{label:'不在乎',value:1}
						],
					},
					{
						type:'多选题',
						title:'亮度大调查',
						multiAns:[],
						myAns:'',
						optionsInfo:[
							{selFlag:false,label:'满意',value:1},
							{selFlag:false,label:'不满意',value:2},
							{selFlag:false,label:'不在乎',value:3}
						],
					},
					{
						type:'填空题',
						title:'弗兰克的事件发生我是填空题',
						myAns:'',
						optionsInfo:[],
					}
				]
			}
		},
		methods:{
			test(){
				this.$refs.succPop.open();
				setTimeout(()=>{
					this.$refs.succPop.close();
				},1200)
			},
			selectSingle(parIndex,sonIndex){
				//if(this.wjLogId > 0)return;
				var parItem = this.queList[parIndex] ;
				parItem.optIndex = sonIndex;//添加active
				parItem.myAns = parItem.optionsInfo[sonIndex].value;
			},
			selectMulti(parItem,innerItem){
				//if(this.wjLogId > 0)return;
				if(innerItem.selFlag == true){
					//this.$set(innerItem,'selFlag',false);
					innerItem.selFlag = false;
					for(var i=0;i<parItem.multiAns.length;i++){
						if(innerItem.value == parItem.multiAns[i]){
							parItem.multiAns.splice(i,1);
						}
					}
				}else if(innerItem.selFlag == false){
					//this.$set(innerItem,'selFlag',true);
					innerItem.selFlag = true;
					parItem.multiAns.push(innerItem.value);
				}
				console.log(innerItem.selFlag)
			},
		}
	}
</script>
<style lang="scss">
	.loading{
		display: flex;
		justify-content: center;
		padding: 200rpx 0;
	}
	.queHead{
		height:464rpx;
		position: relative;
		.comCol{
			color: #660012;
			opacity: .5;
			left: 45rpx;
			font-weight: 600;
		}
		.smTit{
			z-index: 2;
			position: absolute;
			bottom: 130rpx;
			font-size: 30rpx;
			@extend .comCol;
		}
		.queLen{
			@extend .comCol;
			font-size: 28rpx;
			position: absolute;
			bottom: 85rpx;
		}
		.wjImg{
			width: 100%;
			height: 464rpx;
		}
	}
	.succPop{
		width: 520rpx;
		height: 560rpx;
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: $sq-main0;
		.smileImg{
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 60rpx;
		}
	}
	.comBtn{
		border-radius: 20rpx;
		margin:30rpx 30rpx 0;
		background: $pss-sq-main;
		&.schDisBg{
			box-shadow: none;
		}
	}
	.wrap{
		padding-bottom: 30rpx;
	}
	page{
		background: #FFCCD5;
	}
</style>